/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, TableHead, BlobInputList, TextArea,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {useOmnipotentPref, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet} from "../../../common/tool";

/*上面一半：是记录的编辑器。  针对同一块的报告页面部分。都整合在同一个文件内。
* */
export interface Props extends InternalItemProps {
  iAname?: string[];
}
export const item资料查阅 = [
  ['出厂资', [{}], '锅炉出厂资料（设计文件、产品质量证明文件、制造监检证书等）', ],
  ['竣工资', [{}], '安装竣工资料及安装监督检验证书',  ],
  ['检验证', [{}], '改造或者重大修理资料及监督检验证书', ],
  ['历检修', [{}], '历次检验、检查、修理资料（包括检验报告中提出的缺陷、问题和处理整改措施落实情况以及安全附件及仪表校验、检定资料等）', ],
  ['使用管', [{}], '使用管理资料（包括使用记录、节能检查记录、运行故障和事故记录、能效测试报告，高压及以上锅炉的技术监督等资料）', ],
  ['员认为', [{}], '检验员认为需要查阅的其他技术资料', ],
];
export const itemA资料查阅: string[] = ['资料备注', ];
item资料查阅.forEach(([name, title, initIsp], i: number) => {
  itemA资料查阅.push(name as string);
});
export const MaterialReview =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, iAname,}: Props, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const itemA = React.useMemo(() => {
        return [ ...iAname ?? [], ...itemA资料查阅 ];
      }, [ iAname]);
      const [getInpFilter] = useMeasureInpFilter(null, itemA,);
      const titNode=useOmnipotentPrefTitle({config:item资料查阅});
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {item资料查阅.map(([name, _1, _2, unit]: any, i: number) => {
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}
                  &nbsp;
                  <div css={{display: 'inline-flex', alignItems: 'center',flexWrap: 'wrap'}}>
                    查阅结果：
                    <BlobInputList value={inp?.[name]?.r || ''} datalist={['符合要求','无此项']}
                                   style={{display: 'inline-flex', minWidth: '12rem',maxWidth:'100%'}} rows={2}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;检验情况说明
                    <BlobInputList value={inp?.[name]?.m || ''} datalist={['非首次内部检验']}
                                   style={{display: 'inline-flex', width: '13rem'}} rows={2}
                                   onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                  </div>
                </div>
              </React.Fragment>);
            })}
            <hr/>
            备注（填写此次内检中新增加和有变更的部分）：
            <TextArea value={inp?.资料备注 || ''} rows={4}
                      onChange={e => setInp({...inp, 资料备注: e.currentTarget.value || undefined})}/>
            {children}
          </InspectRecordLayout>
      );
    });

/*下面一半：是报告的 展示。
* */
const tailRender=(orc: any, name: string,lix:number,unit:any)=><>
  <CCell><div css={{whiteSpace: 'pre-wrap'}}>{orc?.[name]?.r??'／'}</div></CCell>
  <CCell><div css={{whiteSpace: 'pre-wrap'}}>{orc?.[name]?.m??'／'}</div></CCell>
</>;

export const MaterialReviewVw= ({orc, rep} :{orc:any, rep:any}
) => {
  const [renderBrkTest]=useOmnipotentPref({orc, config:item资料查阅,
    tailRender, pcols:0, noNo:true, unitCel:false});
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}} }>
      <Text id='MaterialReview' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>资料查阅报告</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text>单位内部编号：{orc.单位内部编号}</Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["36%","23%","%"] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight  miniw={800}>
      <TableHead>
        <TableRow>
          <CCell>查阅项目</CCell><CCell>查阅结果</CCell><CCell>检验情况说明</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={'MaterialReview'}>
          {renderBrkTest}
          <TableRow>
            <Cell colSpan={3}><div css={{minHeight: '2rem',whiteSpace:'pre-wrap'
            }}>备注（填写此次内检中新增加和有变更的部分）：<br/>{orc.资料备注??'／'}</div></Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
    </TailMenRowIspCheck>
    <Text css={{fontSize:'0.7rem'}}>
    </Text>
  </>;
};
